<template>
    <el-card class="box_card" shadow="never">
        <div class="box_card_tit">
            <strong>客户趋势图</strong>
            <el-button :disabled="!isShoweCharts" @click="export2Img(cahrtLineRef, '客户趋势图')">导出</el-button>
        </div>
        <div class="cust_qs">
            <el-radio-group v-model="custId">
                <el-radio-button :label="1">入群客户数</el-radio-button>
                <el-radio-button :label="5">退群客户数</el-radio-button>
            </el-radio-group>
        </div>
        <div v-show="isShoweCharts" ref="cahrtLineRef" class="chart_line"></div>
        <div v-show="!isShoweCharts" class="no_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">暂无数据</div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted, watch } from 'vue';
import { export2Img } from '@/utils/utils';

const props = defineProps(['lineData']);

const cahrtLineRef = ref();
const echarts = inject('ec');
const isShoweCharts = ref(true);
const custId = ref(1);

const xData = ref([]);
const yData = ref([]);
const onTooltip = (type: number): string => {
    let res = '';
    switch (type) {
        case 1:
            res = '入群客户数';
            break;
        case 5:
            res = '退群客户数';
            break;
    }
    return res;
};

const getEchart = () => {
    const myChart_one = echarts.init(cahrtLineRef.value);
    const chartOption = reactive({
        color: ['#FF6B00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#FF6B00'
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData.value
        },
        yAxis: {
            type: 'value',
            name: '人数',
            nameTextStyle: {
                verticalAlign: 'bottom',
                align: 'right'
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
            top: 40,
            bottom: 20,
            left: 32,
            right: 40,
            containLabel: true
        },
        series: [
            {
                name: onTooltip(custId.value),
                data: yData.value,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                areaStyle: {
                    opacity: 0.31,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#F8DCD1' },
                        { offset: 0.5, color: '#FDF8F6' },
                        { offset: 1, color: '#FFFAF9' }
                    ])
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    });
    myChart_one.setOption(chartOption);
    window.addEventListener('resize', function () {
        //执行
        if (myChart_one) {
            // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
            myChart_one.resize();
        }
    });
};
const typeFun = (d: string, n: string) => {
    xData.value = [];
    yData.value = [];
    props.lineData.customer.forEach((item: any) => {
        xData.value.push(item[d]);
        yData.value.push(item[n]);
    });
};
watch(
    () => props.lineData,
    val => {
        val.customer.length > 0 ? (isShoweCharts.value = true) : (isShoweCharts.value = false);
        typeFun('date', 'total_add');
        getEchart();
    },
    { deep: true }
);
watch(
    () => custId.value,
    val => {
        if (val == 1) {
            typeFun('date', 'total_add');
        } else if (val == 5) {
            typeFun('date', 'total_lose');
        }
        getEchart();
    },
    { deep: true }
);
onMounted(() => {
    getEchart();
});
defineExpose({ custId });
</script>

<style lang="scss" scoped>
.box_card {
    margin-top: 15px;
    width: 100%;

    .box_card_tit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        padding-bottom: 17px;
        border-bottom: 1px solid #eaeaea;
    }

    .menu_list {
        margin-top: 27px;
        display: flex;
        justify-content: space-between;

        .menu_item {
            // width: 200px;
            height: 80px;
            margin-right: 10px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;

            .menu_item_icon {
                width: 60px;
                margin-right: 10px;
            }

            .menu_item_name {
                font-size: 16px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
                line-height: 16px;
            }

            &:hover {
                box-shadow: var(--el-box-shadow-light);
            }
        }
    }

    .cust_qs {
        margin: 20px 0;
    }

    .no_data {
        height: 400px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 35px;
        }

        .emty_title {
            margin-top: 10px;
        }
    }
}

.chart_line {
    height: 400px;
    width: 100%;
}
</style>
